<template>
  <el-dialog
    width="340px"
    v-model="state.BoxDialog.show"
    title="装箱指示"
    class="dialog"
  >
    <div class="dialogContent">
      <el-form
        :model="state.BoxDialog.query"
        label-suffix="："
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="发货单号">
          <span>{{ state.BoxDialog.query.FhNo }}</span>
        </el-form-item>
        <el-form-item label="托运类型">
          <el-select v-model="state.BoxDialog.query.Type" disabled>
            <el-option label="整箱" value="1"></el-option>
            <el-option label="拼箱" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主要箱型选择">
          <el-select v-model="state.BoxDialog.query.XxType">
            <el-option label="20GP" value="1"></el-option>
            <el-option label="40HQ" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table ref="taskTableRef" :data="state.BoxDialog.tabledata" border style="width: 100%" @select="selectClick">
        <el-table-column type="selection" align="center" width="40" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column
          prop="value"
          label="箱型箱量"
          sortable
        ></el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.BoxDialog.show = false">取消</el-button>
        <el-button type="primary" @click="BoxSubmit">
          算柜完成，去订舱
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick, defineExpose } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const state = reactive({
  BoxDialog: {
    query: {
      FhNo: "SA24050019",
      Type: "1",
      XxType: "1",
    },
    tabledata: [
      {
        id: 1,
        value: "20GP,2；40HQ,1",
      },
      {
        id: 2,
        value: "20GP,2；40HQ,1",
      },
      {
        id: 3,
        value: "20GP,2；40HQ,1",
      },
    ],
    show: false,
    tableLoading: false,
  },
});

const openDialog = () => {
  state.BoxDialog.show = true;
};

const BoxSubmit = () => {
  ElMessage.success("成功");
  state.BoxDialog.show = false;
};
const taskTableRef = ref();
const selectClick = (selection, row) => {
  if (selection.length > 1) {
    let del_row = selection.shift();
    taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
  }
};

defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.MoreDialogContent {
  padding: 8px;
}

.MoreDialogText {
  color: rgba(60, 65, 68, 1);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
}

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
  visibility: hidden;
}
</style>
